<script setup lang="ts">
import useDialog from "@/hooks/useDialog.ts";
import SysDialog from "@/components/dialog/SysDialog.vue";
import SelectChecked from "@/components/selectChecked/SelectedChecked.vue";
import {ElMessage, FormInstance} from "element-plus";
import {nextTick, onMounted, reactive, ref, watch} from "vue";
import {User} from "@/api/user/type.ts";
import {SysMenu} from "@/api/menu/type.ts";
// 弹框属性
const {dialog, onShow, onClose, onConfirm} = useDialog()
// 子列表弹框属性
const childrenDialog = reactive({
  visible: false,
  title: '子项列表',
  width: 900,
  height: 600
})
import useInstance from "@/hooks/useInstance.ts";
import ElIconPicker from "@/components/iconPicker/ElIconPicker.vue";
import { Search, Plus, Edit, Delete, Refresh, Document, Download, ArrowDown, ArrowRight } from '@element-plus/icons-vue';

import { SpecificationConfigurationApi, SpecificationConfigurationVO } from './../../../../src/api/specificationConfiguration/scheduled/index'

// 获取全局 global
const {global} = useInstance()

// 表单ref属性
const addRef = ref<FormInstance>()
// 新增表单绑定对象
const addModel = reactive<any>({
  id: undefined,
  pid: undefined,
  defaultValue: '',
  judgmentConditions: '',
  materialName: '',
  materialSpecifications: '',
  parentName: '',
  height: '',
  heightJudgment: '' ,
  number: '' ,
  numberJudgment: '' ,
  width: '' ,
  widthJudgment: '',
  materialType: '',
  materialTypeJudgment: '',
})

// 搜索表单
const searchForm = reactive({
  materialName: '',
  materialSpecifications: ''
})

// 表单校验规则
const rules = reactive({
  materialName: [
    {required: true, message: '请输入物料名称', trigger: 'blur'},
  ],

})

// 当前选中的卡片及其子项
const currentCard = ref<any>({})
// 当前选中卡片的ID
const currentCardId = ref<number | null>(null)

// 上级菜单数据
const treeList = ref([])
const getParent = async () => {
  try {
    const result = await SpecificationConfigurationApi.getParent();
    treeList.value = result.data
  } catch (error) {
    console.log(error)
  }
}
// 上级下单选中事件
const treeClick = (item: any) => {
  addModel.parentName = item.materialName
  addModel.pid = item.id
}

// 卡片数据
const cardData = ref<any[]>([])
// 数据加载状态
const dataLoading = ref(false)

// 更新当前弹窗中显示的数据
const updateCurrentCardData = () => {
  if (!currentCardId.value) return
  
  const updatedCard = cardData.value.find(item => item.id === currentCardId.value)
  if (updatedCard) {
    currentCard.value = JSON.parse(JSON.stringify(updatedCard)) // 深拷贝，避免引用问题
  } else {
    closeChildrenDialog() // 如果找不到数据，关闭弹窗
  }
}

// 打开子列表弹窗
const showChildrenDialog = (item: any) => {
  currentCardId.value = item.id
  currentCard.value = JSON.parse(JSON.stringify(item)) // 深拷贝，避免引用问题
  childrenDialog.visible = true
  childrenDialog.title = `${item.materialName} - 子项列表`
}

// 关闭子列表弹窗
const closeChildrenDialog = () => {
  childrenDialog.visible = false
  currentCard.value = {}
  currentCardId.value = null
}

// 新增按钮
const addBtn = (pid?: number) => {
  dialog.title = '新增规格配置'
  dialog.height = 650
  dialog.width = 900
  // 显示弹框
  onShow()
  // 获取上级菜单
  getParent()
  // 清理表单
  addRef.value?.resetFields()
  // 清空值
  Object.assign(addModel, {
    id: undefined,
    pid: pid || undefined,
    defaultValue: '',
    judgmentConditions: '',
    materialName: '',
    materialSpecifications: '',
    parentName:'',
    height: '',
    heightJudgment: '' ,
    number: '' ,
    numberJudgment: '' ,
    width: '' ,
    widthJudgment: '',
    materialType:'',
    materialTypeJudgment:''
  })
}

// 表单提交
const commit = async () => {
  const valid = await addRef.value?.validate().catch(() => false)
  if (valid) {
    try {
      // 提交请求
      if (!addModel.id) {
        await SpecificationConfigurationApi.create(addModel)
        ElMessage.success('新增配置成功')
      } else {
        await SpecificationConfigurationApi.update(addModel)
        ElMessage.success('修改配置成功')
      }
      
      // 刷新列表
      await getList()
      
      // 关闭弹框
      onClose()
      
      // 如果子项对话框处于打开状态，更新当前选中卡片数据
      if (childrenDialog.visible && currentCardId.value) {
        updateCurrentCardData()
      }
    } catch (error) {
      ElMessage.error('操作失败，请重试')
    }
  }
}

// 获取数据
const getList = async () => {
  dataLoading.value = true
  try {
    // 构建查询参数，只在有值时包含字段
    const params: any = {}
    
    if (searchForm.materialName) {
      params.materialName = searchForm.materialName
    }
    
    if (searchForm.materialSpecifications) {
      params.materialSpecifications = searchForm.materialSpecifications
    }
    
    // 传递查询参数给API
    const result = await SpecificationConfigurationApi.getlistTree(params)
    cardData.value = result.data
    return result.data
  } catch (error) {
    console.log(error)
    return []
  } finally {
    dataLoading.value = false
  }
}

// 搜索数据
const handleSearch = () => {
  getList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.materialName = ''
  searchForm.materialSpecifications = ''
  getList()
}

// 编辑按钮
const editBtn = async (row: any) => {
  // 显示弹框
  dialog.title = '编辑规格配置'
  dialog.height = 650
  dialog.width = 900
  // 显示弹框
  onShow()
  // 清理表单
  addRef.value?.resetFields()
  // 获取上级菜单
  getParent()
  // 回显数据
  Object.assign(addModel, row)
}

// 删除按钮
const deleteBtn = async (id: number) => {
  const confirm = await global.$myConfirm('此操作将永久删除该配置，是否继续?')
  if (confirm) {
    try {
      await SpecificationConfigurationApi.delete(id)
      ElMessage.success('删除成功')
      
      // 刷新列表
      await getList()
      
      // 如果当前删除的是弹窗中显示的父项数据，关闭弹窗
      if (childrenDialog.visible) {
        if (currentCardId.value === id) {
          closeChildrenDialog()
        } else {
          // 删除的是子项或其他数据，更新当前弹窗内容
          updateCurrentCardData()
        }
      }
    } catch (error) {
      ElMessage.error('删除失败，请重试')
    }
  }
}

// 监听cardData变化，如果弹窗打开则更新内容
watch(cardData, () => {
  if (childrenDialog.visible && currentCardId.value) {
    updateCurrentCardData()
  }
}, { deep: true })

onMounted(() => {
  getList()
})
</script>

<template>
  <el-main class="specification-config-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <el-form :model="searchForm" inline>
        <el-form-item label="物料名称">
          <el-input v-model="searchForm.materialName" placeholder="请输入物料名称" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search">查询</el-button>
          <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
          <el-button type="success" @click="addBtn()" :icon="Plus" v-permission="['sys:menu:add']">新增配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 卡片列表区域 -->
    <div class="card-list-container">
      <div class="card-list-header">
        <h3 class="section-title">BOM列表</h3>
        <el-button :icon="Refresh" circle @click="getList" title="刷新数据" />
      </div>
      
      <div v-loading="dataLoading" class="material-card-grid">
        <template v-if="cardData.length > 0">
          <!-- 顶级卡片 -->
          <el-card 
            v-for="item in cardData" 
            :key="item.id" 
            class="material-card" 
            shadow="hover"
            @click="showChildrenDialog(item)"
          >
            <div class="material-card-header">
              <div class="material-name-wrapper">
                <span class="material-name">{{ item.materialName }}</span>
              </div>
              <div class="material-actions" @click.stop>
                <el-button :icon="Edit" circle type="primary" size="small" @click="editBtn(item)" v-permission="['sys:menu:update']" />
                <el-button :icon="Delete" circle type="danger" size="small" @click="deleteBtn(item.id)" v-permission="['sys:menu:delete']" />
                <el-button :icon="Plus" circle type="success" size="small" @click="addBtn(item.id)" v-permission="['sys:menu:add']" />
              </div>
            </div>
            
            <!-- 子项数量提示 -->
            <div class="children-count" v-if="item.children && item.children.length > 0">
    
              <span class="view-more">点击查看详情</span>
            </div>
    
          </el-card>
        </template>
        
        <!-- 无数据显示 -->
        <el-empty v-else description="暂无数据" :image-size="120">
          <el-button type="primary" @click="addBtn()" :icon="Plus">添加配置</el-button>
        </el-empty>
      </div>
    </div>

    <!--新增、编辑弹窗-->
    <SysDialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @on-close="onClose"
      @on-confirm="commit">
      <template v-slot:content>
        <el-form :model="addModel" ref="addRef" :rules="rules" label-width="140px" class="configuration-form">
          <el-divider content-position="left">基本信息</el-divider>
          
          <el-row :gutter="20">
            <!-- 上级菜单 -->
            <el-col :span="12">
              <el-form-item label="上级菜单" prop="pid">
                <el-tree-select
                  @check-change="treeClick"
                  v-model="addModel.pid"
                  :data="treeList"
                  :render-after-expand="false"
                  show-checkbox
                  check-strictly
                  placeholder="请选择上级菜单"
                />
              </el-form-item>
            </el-col>

            <!-- 物料名称 -->
            <el-col :span="12">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="addModel.materialName" placeholder="请输入物料名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- 物料型号 -->
            <el-col :span="12">
              <el-form-item label="物料型号" prop="materialSpecifications">
                <el-input v-model="addModel.materialSpecifications" placeholder="请输入物料型号"></el-input>
              </el-form-item>
            </el-col>

            <!-- 宽度 -->
            <el-col :span="12">
              <el-form-item label="宽度" prop="width">
                <el-input v-model="addModel.width" placeholder="请输入宽度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- 数量 -->
            <el-col :span="12">
              <el-form-item label="数量" prop="number">
                <el-input v-model="addModel.number" placeholder="请输入数量"></el-input>
              </el-form-item>
            </el-col>
            <!-- 长度/高度 -->
            <el-col :span="12">
              <el-form-item label="长度/高度" prop="height">
                <el-input v-model="addModel.height" placeholder="请输入长度/高度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- 材质 -->
            <el-col :span="12">
              <el-form-item label="材质" prop="materialType">
                <el-input v-model="addModel.materialType" placeholder="请输入材质"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
    
            </el-col>
          </el-row>


          <el-divider content-position="left">判定公式配置</el-divider>

          <el-row>
            <!-- 判定条件 -->
            <el-col :span="24">
              <el-form-item label="物料型号判定公式" prop="judgmentConditions">
                <el-input 
                  type="textarea" 
                  rows="3" 
                  v-model="addModel.judgmentConditions"
                  placeholder="请输入物料型号判定公式"
                ></el-input>
                <div class="form-help-text">支持条件对应格式：型号值1,型号值2=结果值|型号值3,型号值4=结果值，如：60*80,63*90=47|70*90,65*100=54.5</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!-- 宽度判定公式 -->
            <el-col :span="24">
              <el-form-item label="宽度判定公式" prop="widthJudgment">
                <el-input 
                  type="textarea" 
                  rows="3" 
                  v-model="addModel.widthJudgment"
                  placeholder="请输入宽度判定公式"
                ></el-input>
                <div class="form-help-text">支持以下格式：1. 使用"同物料名称"引用其他物料数据；2. 使用"根据物料名称@属性|..."通过其他物料属性计算；3. 支持数学表达式如：{物料名称@宽度}-{物料名称@规格}*2+50</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!-- 长度/高度判定公式 -->
            <el-col :span="24">
              <el-form-item label="长度/高度判定公式" prop="heightJudgment">
                <el-input 
                  type="textarea" 
                  rows="3" 
                  v-model="addModel.heightJudgment"
                  placeholder="请输入长度/高度判定公式"
                ></el-input>
                <div class="form-help-text">支持条件判断公式，格式如：{物料名称@属性}，或使用IFS条件格式：{IFS:物料名称@规格:判断条件}，支持基本数学运算(+,-,*,/,^)</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!-- 数量判定公式 -->
            <el-col :span="24">
              <el-form-item label="数量判定公式" prop="numberJudgment">
                <el-input 
                  type="textarea" 
                  rows="2"  
                  v-model="addModel.numberJudgment"
                  placeholder="请输入数量判定公式"
                ></el-input>
                <div class="form-help-text">支持引用格式：1. "同物料名称" - 直接使用指定物料的数量；2. "根据物料名称@属性|..." - 根据属性计算；3. 支持表达式运算，结果会向上取整</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!-- 材质判定公式 -->
            <el-col :span="24">
              <el-form-item label="材质判定公式" prop="materialTypeJudgment">
                <el-input 
                  type="textarea" 
                  rows="2"  
                  v-model="addModel.materialTypeJudgment"
                  placeholder="请输入材质判定公式"
                ></el-input>
                <div class="form-help-text">同XX@材质</div>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </template>
    </SysDialog>

    <!-- 子项列表弹窗 -->
    <el-dialog
      v-model="childrenDialog.visible"
      :title="childrenDialog.title"
      :width="childrenDialog.width"
      :close-on-click-modal="false"
      destroy-on-close
      class="children-dialog"
      :top="'0vh'"
    >
      <div class="child-dialog-content">
        <!-- 父项信息卡片 -->
        <el-card class="parent-info-card" shadow="always">
          <template #header>
            <div class="parent-header">
              <div class="header-icon-wrapper">
                <el-icon><Document /></el-icon>
                <span>父项信息</span>
              </div>
              <div class="material-badge">{{ currentCard.materialName }}</div>
            </div>
          </template>
          <div class="parent-info">
            <div class="info-grid">
              <div class="info-item" v-if="currentCard.materialName">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">物料名称</div>
                  <div class="info-value">{{ currentCard.materialName }}</div>
                </div>
              </div>
              <div class="info-item" v-if="currentCard.materialSpecifications">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">物料型号</div>
                  <div class="info-value">{{ currentCard.materialSpecifications }}</div>
                </div>
              </div>
              <div class="info-item" v-if="currentCard.width">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">宽度</div>
                  <div class="info-value">{{ currentCard.width }}</div>
                </div>
              </div>
              <div class="info-item" v-if="currentCard.height">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">长度/高度</div>
                  <div class="info-value">{{ currentCard.height }}</div>
                </div>
              </div>
              <div class="info-item" v-if="currentCard.number">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">数量</div>
                  <div class="info-value">{{ currentCard.number }}</div>
                </div>
              </div>

              <div class="info-item" v-if="currentCard.materialType">
                <div class="info-icon"><el-icon><Document /></el-icon></div>
                <div class="info-content">
                  <div class="info-label">材质</div>
                  <div class="info-value">{{ currentCard.materialType }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 子项列表 -->
        <div class="children-list-container">
          <div class="children-list-header">
            <div class="header-with-line">
              <el-icon><ArrowRight /></el-icon>
              <h3>子项列表</h3>
            </div>
            <el-button type="primary" size="small" :icon="Plus" @click="addBtn(currentCard.id)" class="add-child-btn">添加子项</el-button>
          </div>
          
          <div class="children-table-wrapper">
            <el-table
              v-if="currentCard.children && currentCard.children.length > 0"
              :data="currentCard.children"
              border
              stripe
              style="width: 100%"
              :header-cell-style="{background:'var(--header-bg-color, linear-gradient(135deg, #e6f7f2 0%, #d0efe8 100%))', color:'#303133', fontWeight: '600'}"
              class="children-table"
            >
              <el-table-column prop="materialName" label="物料名称" min-width="180" />
              <el-table-column prop="materialSpecifications" label="物料型号" min-width="180" />
              <el-table-column prop="width" label="宽度" width="120">
                <template #default="scope">
                  <span>{{ scope.row.width || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="height" label="长度/高度" width="120">
                <template #default="scope">
                  <span>{{ scope.row.height || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="materialType" label="材质" width="120">
                <template #default="scope">
                  <span>{{ scope.row.materialType || '-' }}</span>
                </template>
              </el-table-column> 
              <el-table-column prop="number" label="数量" width="120">
                <template #default="scope">
                  <span>{{ scope.row.number || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="scope">
                  <div class="table-actions">
                    <el-button class="edit-btn" :icon="Edit" link type="primary" size="small" @click="editBtn(scope.row)" v-permission="['sys:menu:update']">编辑</el-button>
                    <el-button class="delete-btn" :icon="Delete" link type="danger" size="small" @click="deleteBtn(scope.row.id)" v-permission="['sys:menu:update']">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            
            <el-empty 
              v-else 
              description="暂无子项" 
              :image-size="120"
              class="empty-children"
            >
              <el-button type="primary" @click="addBtn(currentCard.id)" :icon="Plus" class="add-empty-btn">添加子项</el-button>
            </el-empty>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeChildrenDialog" class="close-btn">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </el-main>
</template>

<style scoped lang="scss">
.specification-config-container {
  padding: 16px;
  
  .search-card {
    margin-bottom: 16px;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    }
    
    :deep(.el-card__body) {
      padding: 16px;
    }
  }
  
  .card-list-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    padding: 16px;
    
    .card-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 16px;
      
      .section-title {
        position: relative;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin: 0;
        padding-left: 12px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background-color: #409eff;
          border-radius: 2px;
        }
      }
    }
    
    .material-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      
      .material-card {
        transition: all 0.3s;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
        
        .material-card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .material-name-wrapper {
            display: flex;
            align-items: center;
            padding: 4px 0;
            flex: 1;
            
            .material-name {
              font-weight: 600;
              color: #303133;
              margin-right: 8px;
              font-size: 15px;
            }
            
            .material-tag {
              font-size: 12px;
            }
          }
          
          .material-actions {
            display: flex;
            gap: 8px;
          }
        }
        
        .children-count {
          margin-top: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .view-more {
            font-size: 12px;
            color: #909399;
          }
          
          .no-children {
            color: #909399;
            font-size: 13px;
          }
        }
      }
    }
  }
  
  .child-dialog-content {
    --primary-color: #118f76;
    --primary-light: #e6f7f2;
    --primary-dark: #0d6b58;
    --header-bg-color: linear-gradient(135deg, #e6f7f2 0%, #d0efe8 100%);
    --card-shadow: 0 4px 16px rgba(13, 107, 88, 0.08);
    
    .parent-info-card {
      margin-bottom: 24px;
      border-radius: 8px;
      transition: all 0.3s;
      overflow: hidden;
      border: none;
      box-shadow: var(--card-shadow);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(13, 107, 88, 0.12);
      }
      
      :deep(.el-card__header) {
        background: var(--header-bg-color);
        padding: 12px 16px;
        border-bottom: none;
      }
      
      .parent-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .header-icon-wrapper {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 600;
          color: #303133;
          
          .el-icon {
            color: var(--primary-color);
            font-size: 18px;
          }
        }
        
        .material-badge {
          background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
          color: white;
          padding: 4px 12px;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(13, 107, 88, 0.2);
        }
      }
      
      .parent-info {
        padding: 16px;
        
        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 16px;
          
          .info-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px;
            background: #f9fcfa;
            border-radius: 8px;
            transition: all 0.2s;
            
            &:hover {
              background: #e6f7f2;
              transform: translateY(-2px);
            }
            
            .info-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 32px;
              height: 32px;
              background: var(--primary-light);
              border-radius: 8px;
              color: var(--primary-color);
            }
            
            .info-content {
              flex: 1;
              
              .info-label {
                color: #909399;
                font-size: 12px;
                margin-bottom: 4px;
              }
              
              .info-value {
                color: #303133;
                font-weight: 600;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    
    .children-list-container {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--card-shadow);
      
      .children-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .header-with-line {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .el-icon {
            color: var(--primary-color);
            font-size: 18px;
          }
          
          h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(90deg, #303133, #606266);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        
        .add-child-btn {
          background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
          border: none;
          border-radius: 4px;
          box-shadow: 0 2px 8px rgba(13, 107, 88, 0.2);
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 107, 88, 0.3);
          }
        }
      }
      
      .children-table-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        
        .children-table {
          --el-table-border-color: #ebeef5;
          --el-table-header-bg-color: var(--header-bg-color);
          
          :deep(.el-table__header-wrapper) {
            th {
              transition: background-color 0.3s;
              position: relative;
              overflow: hidden;
              
              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
                transform: translateX(-100%);
                transition: transform 0.6s;
              }
              
              &:hover::before {
                transform: translateX(100%);
              }
            }
          }
          
          :deep(.el-table__row) {
            transition: all 0.2s;
            
            &:hover {
              background-color: #e6f7f2 !important;
              transform: scale(1.002);
            }
            
            td {
              transition: all 0.2s;
            }
          }
          
          .table-actions {
            display: flex;
            gap: 8px;
            
            .edit-btn, .delete-btn {
              position: relative;
              overflow: hidden;
              
              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 1px;
                transition: width 0.3s;
              }
              
              &:hover::after {
                width: 100%;
              }
            }
            
            .edit-btn::after {
              background-color: var(--primary-color);
            }
            
            .delete-btn::after {
              background-color: #f56c6c;
            }
          }
        }
        
        .empty-children {
          padding: 30px 0;
          
          .add-empty-btn {
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
            border: none;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(13, 107, 88, 0.2);
            transition: all 0.3s;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(13, 107, 88, 0.3);
            }
          }
        }
      }
    }
  }
  
  .dialog-footer {
    .close-btn {
      min-width: 100px;
      transition: all 0.3s;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      
      &:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
        background-color: #e6f7f2;
      }
    }
  }
  
  // 美化子弹窗样式
  :deep(.children-dialog) {
    .el-dialog__header {
      padding: 16px 20px;
      margin-right: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      background: linear-gradient(135deg, #e6f7f2 0%, #d0efe8 100%);
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(90deg, #16a085, #0d6b58);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        padding-left: 12px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 18px;
          background: linear-gradient(to bottom, #16a085, #0d6b58);
          border-radius: 2px;
        }
      }
    }
    
    .el-dialog__body {
      padding: 24px;
      background: linear-gradient(135deg, #ffffff 0%, #fafcfa 100%);
    }
    
    .el-dialog__footer {
      padding: 16px 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      background: linear-gradient(135deg, #e6f7f2 0%, #d0efe8 100%);
    }
  }
}
</style>
